<template>
	<view class="data_list_view dataOrder">
		<template v-if="list.length">
			<!-- 数据列表 -->
			<view class="list_item" v-for="(item, index) in list" :key="index">
				<view class="list_item_info">
					<view class="list_item_info_rCon1">
						<view class="list_item_info_rCon1_t1">{{ item.type }}</view>
						<view class="list_item_info_rCon1_t2">充值金额：{{ item.price }}元</view>
					</view>
					<view class="list_item_info_rCon2">
						￥{{ item.reward }}
					</view>
				</view>
				<view class="list_item_btnBox">
					{{ item.createTime }}
				</view>
			</view>
		</template>
		
		<emptyData v-else :title="emptyTitle" :loading="loading"></emptyData>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	
	// 页面加载完成
	onLoad(() => {
		getList();
	})
	
	onReachBottom(()=>{
		page.pageNo = page.pageNo + 1;
		getList();
	})
	
	// 无数据显示
	import emptyData from '../../components/empty_data/empty_data.vue';
	const emptyTitle = ref('资料订单');
	
	// 加载状态
	const loading = ref(false);
	// 记录列表
	// const list = reactive([]);
	let list = reactive([]);
	const page = reactive({
		pageNo: 1,
		pageSize: 10,
		total: 0
	})
	// 获取列表
	function getList() {
		loading.value = true;
		uni.showLoading({
			title: '加载中',
			mask: false
		})
		uni.$request('/api/busi/recharge/select', {payStatus: 0,pageNo: page.pageNo, pageSize: page.pageSize}).then((res)=>{
			if(res.status == 200) {
				page.total = res.data.total;
				if(res.data.rechargeList.length) {
					list.concat(res.data.rechargeList);
				}
			}
			uni.hideLoading();
			loading.value = false;
		}).fail((err)=>{
			uni.hideLoading();
			uni.showToast({
				icon: 'error',
				title: '延迟请重试！'
			})
		})
	}
	
	function getClassByState(state) {
		if(state == '制作中') {
			return 'list_item_info_rCon1_t2Style1'
		}else if(state == '运输中') {
			return 'list_item_info_rCon1_t2Style2'
		}
		return '';
	}
	// 查看物流
	function showLogistics(id) {
		
	}
	// 再印一份
	function printAgain(id) {
		
	}
	
</script>

<style lang="less">
.data_list_view {
	position: relative;
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
	background-color: #f5f5f5;
	padding: 20rpx 0;
}
.list_item {
	margin-bottom: 20rpx;
	background-color: #ffffff;
}
.list_item:last-child {
	margin-bottom: 0;
}
.list_item_info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	border: 2rpx solid #f5f5f5;
}
.list_item_info_rCon1_t1 {
	font-size: 28rpx;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 40.5rpx;
	color: rgba(0, 0, 0, 1);
}
.list_item_info_rCon1_t2 {
	font-size: 28rpx;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 40.5rpx;
	color: rgba(166, 166, 166, 1);
}
.list_item_info_rCon2 {
	font-size: 28rpx;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 40.5rpx;
	color: rgba(69, 145, 230, 1);
}
.list_item_btnBox {
	padding: 32rpx;
	font-size: 24rpx;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 35rpx;
	color: rgba(166, 166, 166, 1);
}
</style>
